import React from "react";
import { RouteComponentProps, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";
import {
  Spin,
  Row,
  Col,
  DatePicker,
  Divider,
  Typography,
  Anchor,
  Menu,
  Button,
} from "antd";
import { MainLayout } from "../../layouts/mainLayout";
import { ProductIntro, ProductComments } from "../../components";
import styles from "./DetailPage.module.css";
import { commentMockData } from "./mockup";
import { useSelector } from "../../hook";
import { useDispatch } from "react-redux";
import { addShopCart } from "../../redux/ShopCart/slice";
import { getProductDetail } from "../../redux/ProductDetail/slice";
import { ShoppingCartOutlined } from "@ant-design/icons";
const { RangePicker } = DatePicker;
interface MatchParams {
  touristRouteId: string;
}

export const DetailPage: React.FC<RouteComponentProps<MatchParams>> = (
  props
) => {
  //   console.log(props.history);
  //   console.log(props.location);
  //   console.log(props.match);

  
  const { touristRouteId } = useParams<MatchParams>();
  // const [loading, setLoading] = useState<boolean>(true);
  // const [product, setProduct] = useState<any>(null);
  // const [error, setError] = useState<string | null>(null);
  const loading = useSelector((state) => state.productDetail.loading);
  const error = useSelector((state) => state.productDetail.error);
  const product = useSelector((state) => state.productDetail.DetailList);
  const dispatch = useDispatch();
  // const { touristRouteId } = props.match.params;
  console.log(touristRouteId);
  const jwt = useSelector((s) => s.user.token) as string;
  const scloading=useSelector(s=>s.ShopCart.loading)

  // useEffect(() => {
  //   const fetchData = async () => {
  //     // setLoading(true);
  //     dispatch(productDetailSlice.actions.fetchStart())
  //     try {
  //       const { data } = await axios.get(
  //         `http://123.56.149.216:8080/api/touristRoutes/${touristRouteId}`
  //       );
  //       // setProduct(data);
  //       dispatch(productDetailSlice.actions.fetchSuccess(data))
  //       // setLoading(false);
  //     } catch (error:any) {
  //       dispatch(productDetailSlice.actions.fetchFail(error.message))
  //       // setError(error.message);
  //       // setLoading(false);
  //     }
  //   };
  //   fetchData();
  // }, []);
  useEffect(() => {
    dispatch(getProductDetail(touristRouteId));
  }, [touristRouteId]);

  return (
    <>
      {
        loading ? (
          <Spin
            size="large"
            style={{
              marginTop: 200,
              marginBottom: 200,
              marginLeft: "auto",
              marginRight: "auto",
              width: "100%",
            }}
          />
        ) : error ? (
          <div>{error}</div>
        ) : (
          <MainLayout>
            <Row>
              <Col span={13}>
                <ProductIntro
                  title={product.title}
                  shortDescription={product.description}
                  price={product.originalPrice}
                  coupons={product.coupons}
                  points={product.points}
                  discount={product.price}
                  rating={product.rating}
                  pictures={product.touristRoutePictures.map((p) => p.url)}
                />
              </Col>
              <Col span={11}>
              <Button
                style={{marginTop: 50, marginBottom: 30, display: 'block'}}
                type="primary"
                danger
                loading={scloading}
                onClick={()=> {
                  dispatch(addShopCart({jwt, touristRouteId: product.id}))
                }}
              >
                <ShoppingCartOutlined />
                放入购物车
              </Button>
                <RangePicker open style={{ marginTop: 20 }} />
              </Col>
            </Row>
            {/* 锚点菜单 */}
            <Anchor className={styles["product-detail-anchor"]}>
              <Menu mode="horizontal">
                <Menu.Item key="1">
                  <Anchor.Link href="#feature" title="产品特色"></Anchor.Link>
                </Menu.Item>
                <Menu.Item key="3">
                  <Anchor.Link href="#fees" title="费用"></Anchor.Link>
                </Menu.Item>
                <Menu.Item key="4">
                  <Anchor.Link href="#notes" title="预订须知"></Anchor.Link>
                </Menu.Item>
                <Menu.Item key="5">
                  <Anchor.Link href="#comments" title="用户评价"></Anchor.Link>
                </Menu.Item>
              </Menu>
            </Anchor>
            {/* 产品特色 */}
            <div id="feature" className={styles["product-detail-container"]}>
              <Divider orientation={"center"}>
                <Typography.Title level={3}>产品特色</Typography.Title>
              </Divider>
              <div
                dangerouslySetInnerHTML={{ __html: product.features }}
                style={{ margin: 50 }}
              ></div>
            </div>
            {/* 费用 */}
            <div id="fees" className={styles["product-detail-container"]}>
              <Divider orientation={"center"}>
                <Typography.Title level={3}>费用</Typography.Title>
              </Divider>
              <div
                dangerouslySetInnerHTML={{ __html: product.fees }}
                style={{ margin: 50 }}
              ></div>
            </div>
            {/* 预订须知 */}
            <div id="notes" className={styles["product-detail-container"]}>
              <Divider orientation={"center"}>
                <Typography.Title level={3}>预定须知</Typography.Title>
              </Divider>
              <div
                dangerouslySetInnerHTML={{ __html: product.notes }}
                style={{ margin: 50 }}
              ></div>
            </div>
            <div id="comments" className={styles["product-detail-container"]}>
              <Divider orientation={"center"}>
                <Typography.Title level={3}>用户评价</Typography.Title>
              </Divider>
              <div style={{ margin: 40 }}>
                <ProductComments data={commentMockData} />
              </div>
            </div>

            {/* 商品评价*/}
          </MainLayout>
        )
        // return <h1>路游路线详情页面, 路线ID: {props.match.params.touristRouteId}</h1>;
      }
    </>
  );
};
